import React, { Component } from 'react'
import avatar from '../avatar.png'
export default class Form extends Component {
  state = {
    content: '',
  }
  handleChange = (e) => {
    this.setState({ content: e.target.value })
  }
  // !#2 子组件调用父组件传递过来方法的同时并传参
  handleSubmit = () => {
    if (this.state.content.trim() === '') return alert('不能为空')
    // 要么把 content 传到父组件，父组件加工成对象并怼到 list
    // 要么在这儿直接加工好对象，直接把对象传递到父组件，父组件怼到 list
    const o = {
      id: Date.now(),
      author: 'elser',
      comment: this.state.content,
      time: new Date(),
      img: avatar,
      attitude: 0,
      hot: Date.now(),
    }
    this.props.addItem(o)
    this.setState({ content: '' })
  }
  render() {
    return (
      <div className='comment-send'>
        <div className='user-face'>
          <img className='user-head' src={avatar} alt='' />
        </div>
        <div className='textarea-container'>
          <textarea
            cols='80'
            rows='5'
            placeholder='发条友善的评论'
            className='ipt-txt'
            value={this.state.content}
            onChange={this.handleChange}
          ></textarea>
          <button className='comment-submit' onClick={this.handleSubmit}>
            发表评论
          </button>
        </div>
        <div className='comment-emoji'>
          <i className='face'></i>
          <span className='text'>表情</span>
        </div>
      </div>
    )
  }
}
